<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="72" height="72" style="background:#F7F7F7;">
        <p>you browser not support canvas!</p>
    </canvas>
</body>
<script>
    let canvas = document.getElementById('canvas'), 
        context = canvas.getContext('2d'), 
        centerX = canvas.width / 2, //圆心x坐标
        centerY = canvas.height / 2,//圆心y坐标
        lineWidth = 4, //线宽
        r = 32, //半径
        rad = Math.PI * 2 / 100, 
        speed = 1; 

    //进度圈
    function moveCircle(n) {
        context.beginPath();
        context.strokeStyle = "#1AC47C";
        context.lineWidth = lineWidth;
        context.arc(centerX, centerY, r, -Math.PI / 2, -Math.PI / 2 + n * rad, false);
        context.stroke();
    }

    //底层圈
    function staticCircle() {
        context.beginPath();
        context.strokeStyle = "#EBEDF3";
        context.lineWidth = lineWidth;
        context.arc(centerX, centerY, r, 0, Math.PI * 2, false);
        context.stroke();
        context.closePath();
    }

    //百分比文字
    function text(n) {
        context.fillStyle = "#1b2844";
        context.font = "12px Arial";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(n.toFixed(0) + "%", centerX, centerY);
    }

    setInterval(()=>{
        context.clearRect(0, 0, canvas.width, canvas.height);
        staticCircle();
        text(speed);
        moveCircle(speed);
        if (speed > 100) speed = 0;
        speed ++;
    }, 10)
</script>

</html>